<template>
  <div>
    <div class="datePicker">
      <mt-datetime-picker
          type="date"
          ref="picker1"
          year-format="{value} 年"
          month-format="{value} 月"
          date-format="{value} 日"
          @confirm="handleConfirm1"
          @cancel="cancel"
          :startDate="startDate"
          v-model="dateVal"
      >
      </mt-datetime-picker>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import { DatetimePicker,Toast,Popup,Picker  } from 'mint-ui';
Vue.component(DatetimePicker.name, DatetimePicker);
export default {
  name: "DaySelectView",
  props : {
    viewFrom: {
      type: String,
      default: ''
    }
  },
  data(){
    return{
      startText:"今天",
      startDate: new Date('1980-01-01'),
      dateVal:'',
      nowDate:'',
      isShow1: false,
      isShow: false,
      pickTime: {
        month: '',
        year: ''
      }
    }
  },
  components:{
    [DatetimePicker.name]: DatetimePicker
  },
  mounted() {
    this.timeFormate()
  },
  watch : {
    isShow(value) {
      if (value) {
        this.openPicker1();
      }
    },
    isShow1(value) {
      if (value) {
        this.openPicker1();
      }
    }
  },
  methods: {
    //当前时间
    timeFormate() {
      var date = new Date();
      var year = date.getFullYear();
      var month = date.getMonth() + 1;
      var strDate = date.getDate();
      var strDateEnd = date.getDate()+1;
      if (month >= 1 && month <= 9) {
        month = "0" + month;
      }
      if (strDate >= 0 && strDate <= 9) {
        strDate = "0" + strDate;
      }
      if (strDateEnd >= 0 && strDateEnd <= 9) {
        strDateEnd = "0" + strDateEnd;
      }
      if(strDateEnd>30){
        strDateEnd = date.getDate();
      }
      var startText = year + '/'+ month + '/' + strDate +'/';
      this.currentdate1=startText;
      var timeSign1=year+month+strDate
      this.advertValidDate=timeSign1
    },
    openPicker1() {
      this.dateVal=this.nowDate ? this.nowDate :  new Date();
      this.$refs.picker1.open();
      this.monthSelectView();
    },
    handleConfirm1 (data) {
      var arr1 = this.getDate(this.dateVal).split('-')
      this.$emit('myDateSelect',arr1[0]+'/'+arr1[1]+'/'+arr1[2])
      this.pickTime.year = arr1[0]
      this.pickTime.month = arr1[1]
      if(this.viewFrom === 'detailView') {
        this.$parent.hddetailView();
      }
    },
    cancel() {
      this.$emit('myDateSelect',"");
    },
    getDate(data) {
      const y = data.getFullYear()
      let m = data.getMonth() + 1
      m = m < 10 ? '0' + m : m
      let d = data.getDate()
      d = d < 10 ? ('0' + d) : d
      return y + '-' + m + '-' + d
    },
    monthSelectView() {
      let showDay = this.viewFrom === 'detailView' ? 'none' : '';
      // DatePicker 年月日展示
      let a = document.getElementsByClassName('picker-slot')
      for (let i = 0; i < a.length; i++) {
        if (i==2) {
          a[i].style.display = showDay
        }
      }
    }
  }
};
</script>
<style>
.mint-datetime-action{
  width: 32% !important;
}
.picker-selected{
  font-family: PingFangSC-Semibold;
  font-size: 24px;
  letter-spacing: -0.04px;
}
.picker-item{
  color:#999999;
  font-family: PingFangSC-Light;
  font-size: 16px;
  letter-spacing: -0.04px;
}
</style>
